<template xmlns="http://www.w3.org/1999/html">
    <div class="">
        <div class="detail_content">
            <div class="detail_body">
                <ul class="detail_header clearfix">
                    <li>
                        <router-link to="/">首页</router-link>
                        <span>></span></li>
                    <li>
                        <router-link to="/list">菜品中心</router-link>
                        <span>></span></li>
                    <!--                    <li>领克教育系统</li>-->
                    <li>{{classData.gbname}}:{{classData.gname}}</li>
                </ul>
                <div class="clearfix">
                    <div class="video_box">
                        <div class="detail_view">
                            <div >
                                <!--                                播放视频-->

                                <!--                                classData.price==0-->
                                <div v-if="isTitileUpdate === true&&classData.price==0||TeacherVideoStatus===true" width="100%" height="100%" >
                                    <video style="width: 600px" height="340px" controls="controls" :src="ChildId" class="myVideo" preload="auto" loop="loop">

                                    </video>
                                </div>
                                <div v-else-if="isTitileUpdate === true&&isFree==true||TeacherVideoStatus===true||MemberStatus==1"  width="100%" height="100%">
                                    <video style="width: 600px" height="340px" controls="controls" :src="ChildId" class="myVideo" preload="auto" loop="loop">
                                    </video>
                                </div>
                                <div v-else-if="isTitileUpdate === true&&playStatus==1||TeacherVideoStatus===true||MemberStatus==1" width="100%" height="100%" >
                                    <video style="width: 600px" height="340px" controls="controls" :src="ChildId" class="myVideo" preload="auto" loop="loop">

                                    </video>
                                </div>
                                <img :src="classData.img" v-else style="width: 600px;height: 295px"/>

                            </div>
                        </div>
                        <!-- <span class="iconfont close_video" @click="stopVideo">&#xe616;</span> -->
                    </div>
                    <div class="view_info">
                        <p>{{classData.gname}}</p>
                        <!--                        <p>领课教育系统</p>-->
                        <div class="view_price">
                            <div>
                                价格:<span>{{classData.sellingprice}}/{{classData.gsname}}</span>
                            </div>
                        </div>
                        <div class="view_teacher">
                            <span class="text_b">店铺:</span>{{classData.name}}

                            <!--                            <span class="text_b">讲师:</span>{{}}-->
                        </div>
                        <div class="view_teacher mgt20">
                            <span class="text_b">剩余库存:</span>{{classData.count}} {{classData.gsname}}
                        </div>

                        <div class="foot_box">
                            <<div class="study_num">
                                <span class="iconfont mgr10">&#xe60a;</span>
                                {{classData.viewCount}}
                            </div>

                            <button class="buy_btn" v-if="classData.isFree && !HuiYuanId" @click="goLogin">登录观看</button>

                            <div>
                                <a href="javascript:" class="collect_btn"  @click="deleteshouChang"  v-if="shouChangStatus===1"><span class="iconfont"  style="color: yellow"></span>&nbsp;已收藏</a>
                                <a href="javascript:" class="collect_btn"  @click="shouChang()" v-else><span class="iconfont"></span>&nbsp;未收藏</a>
                            </div>


                            </div>
                            <div>
                                <button :disabled="classData.count == 0" class="buy_btn" id="buyBtn" @click="buyCourse"  >立即购买</button>
                            </div>

                            <el-dialog title="收银台" :visible.sync="dialogFormVisible" width="700px">
                                <div data-v-1ee14d65="" class="modal_body" style="width: 100%">
                                    <table data-v-1ee14d65="" class="table">
                                        <tr data-v-1ee14d65="">
                                            <th data-v-1ee14d65="">商品图片</th>
                                            <th data-v-1ee14d65="">商品价格</th>
                                            <th data-v-1ee14d65="">商品数量</th>
                                            <th data-v-1ee14d65="">商品总价</th>
                                        </tr>
                                        <tr data-v-1ee14d65="">
                                            <td data-v-1ee14d65="" width="200px">
                                                <div data-v-1ee14d65="" style="width: 150px;">
                                                    <div data-v-1ee14d65="" class="img" style="width: 120px">
                                                        <div>

                                                            <img data-v-1ee14d65="" :src="classData.img" alt=""
                                                                 style="width: 120px;height: 60px">
                                                        </div>
                                                    </div>
                                                    <div data-v-1ee14d65=""
                                                         style="position: absolute;top: 116px;left: 175px;font-size:15px;color: black">
                                                        {{classData.gname}}
                                                    </div>
                                                </div>
                                            </td>
                                            <td data-v-1ee14d65="" class="c_orange">{{classData.sellingprice}}¥</td>

                                            <td data-v-1ee14d65="" >
                                                <template>
                                                    <el-input-number v-model="num" @change="handleChange" :min="1" :max=classData.count label="描述文字" style="width: 120px"></el-input-number>
                                                </template>
                                                {{classData.gsname}}
                                            </td>

                                            <td data-v-1ee14d65="" >
                                                <div class="cartList" id="zong1">
                                                    ¥{{classData.sellingprice*num}}
                                                </div>
                                            </td>

                                        </tr>

                                    </table>

                                    <div class="pay_type" style="border-color: #ec7f00;margin-top: 20px">

                                        <input type="radio" id="payType2" name="payType" value="1" v-model="payType"
                                               style="margin-left: -370px">
                                        <label for="payType2" border="true" class="pay pay_ali"
                                               @click="changePay(1)"></label>
                                        <input type="radio" id="payType1" name="payType" value="2" v-model="payType"
                                               style="margin-left: 170px">
                                        <label for="payType1" class="pay pay_weixin" @click="changePay(2)"></label>
                                    </div>

                                </div>
                                <div data-v-1ee14d65="" class="modal_foot">
                                    <button data-v-1ee14d65="" class="solid_btn" @click="submit"
                                            style="margin-left: 160px">立即支付
                                    </button>
                                    <button data-v-1ee14d65="" class="solid_btn" @click="shoppingCart"
                                            style="margin-left: 160px">加入购物车
                                    </button>

                                </div>
                                <!--                                </div>-->
                            </el-dialog>
                            <!--                            微信支付-->
                            <el-dialog
                                    title="收银台"
                                    :visible.sync="dialogVisible"
                                    width="30%"
                            >
                                <div style="text-align: center">
                                    <p>微信支付 {{payResult.price}}元</p>
                                    <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
                                        <vue-qr
                                                :text="payResult.codeUrl"
                                                :margin="0"
                                                colorDark="green"
                                                :logoSrc="require('/src/assets/img/wx.jpg')"
                                                colorLight="#fff"
                                                :size="200">

                                        </vue-qr>
                                    </div>
                                </div>
                                <el-divider></el-divider>
                                <div style="font-size: 13px">
                                    提示:<br>
                                    支付成功前请勿手动关闭页面<br>
                                    二维码两小时内有效,请及时扫码支付<br>
                                </div>

                            </el-dialog>

                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
    import vueQr from 'vue-qr'
    export default {
        name: "Display",
        // props:['classData','ChildId'],
        props: {
            classData: {
                type: Object,
            },
            ChildId: {
                type: String,
            },
            isTitileUpdate: {
                type: Boolean,
            },
            isFree: {
                type: Boolean,
            },
            videoId:{
                type: String,
            },
            teacherVideoID:{
                type: String,
            },


        },
        components: {
            vueQr
        },
        data() {
            return {
                submissionFlag: false,
                // isTitileUpdate:false,
                myid: "",
                dialogFormVisible: false,
                HuiYuanId: window.sessionStorage.getItem("memberId"),
                //是否为讲师
                TeacherId:window.sessionStorage.getItem("isTeacher"),
                mobileId:window.sessionStorage.getItem("mobile"),
                //    订单数据
                orderData: [],
                // payType:[],
                payType: '',
                //图片
                AllImg:[],
                //得到响应的结果
                orderNo:"",
                payResult: {
                    //价格
                    price:0,
                    //二维码路径  借助vue-qr 可以把二维码地址转为二维码图片
                    codeUrl:"",

                    orderNo:"",
                    logoSrc: "/src/assets/img/wx.jpg" //微信二维码中间小logo
                },
                timer1: '',
                dialogVisible: false, //弹出框

                //    是否购买(状态)
                playStatus: 0,
                //    支付宝状态
                ZhiFuBaoStatus:false,
                //订单号
                order_no:this.$route.query.out_trade_no,
                //    收藏状态:
                shouCangStatus:0,
                //  收藏的实体类
                shouChangData:{
                    courseid:this.$route.params.id,
                    memberid: window.sessionStorage.getItem("memberId"),
                    //
                },
                MemberStatus:0,
                shouChangStatus:0,
                //  讲师视频状态
                TeacherVideoStatus:false,

                //加减变量
                num: 1,
                aaaa:{

                },
                bbb:{},
                //订单号
                soid:"",
            }
        },
        created() {
            // console.log(sessionStorage.getItem("mobile"))
            this.queryMemberStatus();
            this.myid = this.$route.params.id
            /*this.getOrderStatus();*/
            this.HuoQuImgByCourseId();
            // console.log(this.isTitileUpdate)



            this.IsShouChang();
            //根据课程id获取所有的章节的视频
            this.queryAllById();
            this.submissionFlag1();
            this.queryAllById();



        },
        mounted() {
            // alert(this.videoId)
            // console.log(this.videoId)
        },
        watch:{
            "$router.path":"IsShouChang"
        },

        methods: {
           /* submissionFlag1(){
                this.obtain = this.classData.count;
                alert(this.obtain)
                if(this.obtain == 0){
                    this.submissionFlag=true;//赋值给el-button
                }else{
                    this.submissionFlag=false;//赋值给el-button
                }
            },*/
            //根据课程id获取所有的章节的视频
            HuoQuImgByCourseId(){
                var that=this;
                this.$http.post("/order/video/queryAllVideoByCourseId/"+this.$route.params.id).then(function (resp) {
                    if (resp.data.code===2000){
                        if (resp.data.result.result.length>0){
                            that.AllImg=resp.data.result.result[0].videoSourceId
                        }
                    }

                })
            },
            //根据手机号查询该视频信息是否该讲师发布的
            queryAllById(){
                var that=this;
                this.TeacherVideoStatus=false;
                this.$http.post("/order/course/queryAllById/"+this.$route.params.id+"/"+this.mobileId).then(function (resp) {
                    // console.log(resp)
                    if (resp.data.code===2000){
                        that.TeacherVideoStatus=true;
                        that.$emit("TeacherVideoStatus",that.TeacherVideoStatus)
                    }
                })

            },
            //    根据课程id和会员id判断当前账号是否为讲师
            queryMemberStatus(){
                var that=this;
                this.$http.post("/order/course/queryMemberStatus/"+this.$route.params.id+"/"+this.mobileId).then(function (resp) {
                    if (resp.data.code===2000){
                        that.MemberStatus=resp.data.result.isType;
                    }


                })
            },
            //渲染页面是否已经收藏
            IsShouChang(){
                var that=this;
                this.$http.post("/core/shoucangCourse/findFavoriteCourse",this.shouChangData).then(function (resp) {
                    if (resp.data.code===2000){
                        that.shouChangStatus=resp.data.result.status;
                    }

                })
            },
            //收藏
            shouChang(){
                console.log(this.classData)
                this.$http.post("/goods/goods/collect/"+this.classData.zid+"/"+this.classData.sid).then(result=>{
                    if(result.data.code==2000){
                        this.$message.success(result.data.msg)
                        this.shouChangStatus = 1
                    }else {
                        this.$message.error(result.data.msg)
                    }
                })
            },
            //取消收藏
            deleteshouChang(){
                var that=this;
                this.$http.post("/goods/goods/qxcollect/"+this.classData.zid+"/"+this.classData.sid).then(result=>{
                        if(result.data.code==2000){
                            this.$message.success(result.data.msg)
                            this.shouChangStatus = 0;
                        }else {
                            this.$message.error(result.data.msg)
                        }
                })

            },


            //播放视频
            boFang() {
                // alert(this.videoId)
                var that=this;
                if (this.ChildId==''){

                    if (that.AllImg.length=0){
                        this.ChildId=this.AllImg;
                    }
                    else{
                        this.ChildId="https://kk-books.oss-cn-hangzhou.aliyuncs.com/51425190-ca33-4f3c-9919-eea581d451aa.mp4"
                    }

                }
                this.isTitileUpdate = true;
                var myVideo=document.getElementsByClassName("myVideo")[0];
                if(myVideo.paused){
                    myVideo.play();
                }else{
                    myVideo.pause();

                }

            },

            queryPayStatus() {
                var that = this;
                this.$http.post("order/order/queryPayStatus/"+this.orderNo).then(r => {
                    if (r.data.code === 2000) {
                        //如果支付成功，清除定时器
                        clearInterval(that.timer1)
                        that.timer1 = null;
                        that.$message({
                            type: 'success',
                            message: '支付成功!'
                        })
                        that.dialogVisible = false;
                        //刷新界面
                        this.$router.go(0);
                        //跳转到课程详情页面观看视频
                        // that.$router.push({path: '/DetailId/:id' + that.payResult.course_id})
                    }
                })
            },

            goLogin() {
                // this.$store.dispatch('REDIRECT_LOGIN');
                this.$router.push({
                    path: '/qianLogin'
                }); //登录
            },
            stopVideo() {
            },
            //请先登录
            buyCourse() {

                // alert(this.playStatus)
                if (!this.HuiYuanId) {
                    this.$msgBox({
                        content: '请登录后再购买',
                        isShowCancelBtn: false
                    }).then(() => {
                        this.$router.push({
                            path: '/qianLogin'
                        }); //登录
                    })

                    return
                }
                this.dialogFormVisible = true;
            },
            getOrder() {

            },
            resetPay() {
                this.payStep = 1;
                this.getOrder(this.payType);
            },
            changePay(int) {
                this.getOrder(int);
            },
           /* //根据课程id和会员id查询支付状态
            getOrderStatus() {
                // alert(this.$route.params.id)
                var that = this;
                this.$http.post("/order/order/queryPayStatus/" +this.orderNo).then(function (resp) {
                    if (resp.data.code === 2000) {
                        if (resp.data.result===null){
                            that.playStatus = 0;
                        }else {
                            that.playStatus = resp.data.result.state;
                        }
                    }

                })
            },*/
            //购物车----------------------------------------------------------------------------------------------
            shoppingCart(){
                var that=this
                this.bbb.gsid=that.classData.zid;
                this.bbb.gscounts=this.num;
                this.$http.post("/order/shopcar/inset",this.bbb).then(result=>{
                         that.dialogFormVisible=false;
                        console.log(result)
                        if (result.data.code===2000){
                            that.$message.success(result.data.msg)
                        }else if(result.data.code===2001){
                            that.$message.success(result.data.msg)
                        }else {
                            that.$message.error(result.data.msg)
                        }
                })

            },
            submit() {
                this.aaaa.goodsname=this.classData.gname;
                this.aaaa.img=this.classData.img;
                this.aaaa.typename=this.classData.typename;
                this.aaaa.gsname=this.classData.gsname;
                this.aaaa.gbname=this.classData.gbname;
                this.aaaa.gdname=this.classData.gdname;
                this.aaaa.dprice=this.classData.sellingprice;
                this.aaaa.zprice=this.classData.sellingprice*this.num;
                this.aaaa.tbQuantity=this.num;
                this.aaaa.sname=this.classData.name;
                this.aaaa.id=this.classData.id;

                 this.aaaa.gid=this.classData.zid;

                this.aaaa.orderPay=this.classData.sellingprice*this.num;
                this.aaaa.shopId=this.classData.sid;
                console.log(this.classData)
                this.$http.post("/order/order/OrderGeneration",this.aaaa).then(result=>{
                    console.log(this.aaaa.id)
                    this.soid=result.data.data;
                    this.orderNo=result.data.data;
                    console.log(this.orderNo)
                    if (this.payType === '1') {
                        this.$http.get("/order/alipay/pay?subject="+ this.classData.gname +"&traceNo="+ this.soid +"&totalAmount="+this.aaaa.zprice).then(function (resp) {
                            var that = this;
                            // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                            const divForm = document.getElementsByTagName("div");
                            if (divForm.length) {
                                document.body.removeChild(divForm[0]);
                            }
                            const div = document.createElement("div");
                            div.innerHTML = resp.data; // data就是接口返回的form 表单字符串
                            document.body.appendChild(div);
                            document.forms[0].setAttribute("target", "_blank"); // 新开窗口跳转
                            document.forms[0].submit();
                            this.$router.go(0);
                        })



                    } else if (this.payType === '2') {
                        //设置一个定时任务，每隔3秒调用一次
                        var that = this;
                        this.$http.post("/order/order/createNavite/"+this.orderNo).then(function (resp) {
                            console.log(resp)
                            that.dialogVisible = true
                            if (resp.data.code === 2000) {

                                that.payResult = resp.data.data;
                            } else {
                                that.$message.error("订单已经生成,尚未支付");
                            }
                        })
                        //设置一个定时任务，每隔3秒调用一次
                        this.timer1 = setInterval(() => {
                            this.queryPayStatus(this.payResult.orderNo)
                        }, 4000);
                    }

                    this.dialogVisible=false;

                })
            },
            //计数器
            handleChange(value) {
                console.log(value);
            }
        }
    }

</script>


<style lang="scss" rel="stylesheet/scss">
    .detail_content {
        background: rgb(51, 51, 51);
        height: 398px;
        .detail_body {
            width: 1200px;
            margin: 0 auto;
            height: 373px;
        }
    }

    dialog {
        height: 400px;
    }

    .detail_header {
        li {
            float: left;
            line-height: 57px;
            margin: 0 10px;
            color: #fff;
            font-size: 14px;

            span {
                margin-left: 20px;
            }

            a {
                color: #fff;

                &:hover {
                    text-decoration: none;
                }
            }
        }
    }

    .view_info {
        float: right;
        width: 570px;
        height: 295px;
        position: relative;

        p {
            font-size: 18px;
            color: #fff;
            word-break: break-all;
        }

        .foot_box {
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: 36px;
        }

        .buy_btn {
            display: block;
            width: 136px;
            height: 36px;
            color: #fff;
            background: #D51423;
            border: none;
            border-radius: 6px;
            line-height: 36px;
            text-align: center;
            font-size: 14px;
            // position: absolute;
            // bottom: 0px;
            &:hover {
                text-decoration: none;
                color: #fff;
                cursor: pointer;
            }
        }

        .study_num {
            float: right;
            height: 36px;
            line-height: 36px;
            color: #999;
            font-size: 14px;
        }

        .huabei {
            color: #fff;
            font-size: 13px;
            position: absolute;
            bottom: 0;
            padding-left: 25px;

            img {
                width: 17px;
                height: 17px;
                position: absolute;
                left: 0;
            }
        }
    }

    .view_price {
        border-bottom: 1px solid rgb(102, 102, 102);
        padding-bottom: 10px;
        color: rgb(102, 102, 102);
        font-size: 14px;
        margin: 20px 0;

        span {
            font-size: 24px;
            color: #D51423;
            font-weight: bold;
            margin-left: 20px;
        }

        .font_16 {
            font-size: 16px;
            font-weight: 400;
        }

        .set_vip {
            color: #0099FF;
            margin-left: 6px;
        }

        .favo {
            font-size: 10px;
            display: inline-block;
            height: 14px;
            line-height: 14px;
            background: #D51423;
            color: #333;
            padding: 0 8px;
            border-radius: 0 7px 7px 0;
            margin-left: 7px;
        }

        .favo_right {
            background: none;
            border: 1px solid #D51423;
            height: 13px;
            color: #D51423;
            margin-left: -5px;
            border-radius: 7px 0 0 7px;
        }

        .small_favo {
            font-size: 10px;
            border: 1px solid #D51423;
            height: 13px;
            line-height: 14px;
            color: #D51423;
            padding: 0 5px;
        }

        .big_favo {
            color: #999;
            font-size: 14px;
            font-weight: 400;
            margin-left: 3px;
        }
    }

    .detail_view {
        float: left;
        width: 600px;
        height: 295px;
        background: rgb(102, 102, 102);
        background-size: 100%;

        &.float_win {
            position: fixed;
            right: 10px;
            bottom: 30px;
            z-index: 9999;
        }
    }

    .view_teacher {
        color: rgb(102, 102, 102);
        font-size: 14px;

        .text_b {
            margin-right: 20px;
            font-weight: bold;
        }
    }

    /*.modal_body {*/
    /*    height: 262px;*/
    /*    overflow: auto;*/
    /*    font-size: 91%;*/
    /*}*/
    .el-dialog__body {
        padding: 6px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }

    .modal_head[data-v-1ee14d65] {
        line-height: 46px;
        background-color: #f9f9f9;
        text-align: right;
        padding: 0 20px;
    }

    .remark[data-v-1ee14d65] {
        padding: 20px;
        overflow: hidden;
        font-size: 14px;
        border-top: 1px solid #f1f1f1;
    }

    .remark input[data-v-1ee14d65] {
        text-indent: .5em;
        height: 22px;
        width: 338px;
        border: none;
    }

    .pay {
        width: 200px;
        height: 50px;
        border: 1px solid #fff;
        float: left;
        background-repeat: no-repeat;
        background-position: center center;

        &.pay_ali {
            background-image: url();
            margin-left: 20px;


        }

        &.pay_weixin {
            background-image: url();
            margin-left: 0px;

        }
    }

    .modal_body {
        height: 310px;
        overflow: auto;
        font-size: 91%;
        width: 460px;
    }

    .table td {
        vertical-align: middle;
        padding: 19px;
        text-align: center;
        border-bottom: 1px solid #f8f8f8;
    }

    .table {
        width: 95%;
    }

    element.style {
        position: absolute;
        top: 61px;
        left: 175px;
        font-size: 15px;
        color: black;
    }


</style>
